$(function() {
    $("#row").on("click", "#del", function() {
        $(this).parents("ul").remove();
    });

    $("#row").on("click", "#reset", function() {
        console.log(1);
        var $arr = $(this).parent().prevAll();
        var $name = $arr.eq(2).text();
        var $age = $arr.eq(1).text();
        var $class = $arr.eq(0).text();
        var name = $(this).parent().siblings().eq(0);
        var age = $(this).parent().siblings().eq(1);
        var Class = $(this).parent().siblings().eq(2);
        //   console.log(name);
        $("#cover").css("display", "block");
        $("#name").val($name);
        $("#age").val($age);
        $("#class").val($class);
        $(".sure")
            .off()
            .click(function() {
                var $nName = $("#name").val();
                var $nAge = $("#age").val();
                var $nClass = $("#class").val();
                name.text($nName);
                age.text($nAge);
                Class.text($nClass);
                // console.log(name.text($nName));
                $("#cover").css("display", "none");
            });
    });
    $("#add").on("click", function() {
        $("#cover").css("display", "block");
        $("#name").val("");
        $("#age").val("");
        $("#class").val("");
        $(".sure")
            .off()
            .click(function() {
                var $name = "";
                var $age = "";
                var $Class = "";
                var $nName = $("#name").val();
                var $nAge = $("#age").val();
                var $nClass = $("#class").val();
                if ($nName == "" || $nAge == "" || $nClass == "") {
                    // for (var i = 0; i < $("span").length; i++) {
                    //     if ($(this).parent().children("p").eq(i).val() === "") {
                    //         $("span").css("fontSize", 12);
                    //         $("span").css("color", "red");
                    //         $("span").css("display", "block");
                    //     } else {
                    //         $("span").css("display", "none");
                    //     }
                    // }
                    return false;
                }
                $name = $nName;
                $age = $nAge;
                $Class = $nClass;
                // console.log(name.text($nName));
                $("#cover").css("display", "none");
                var $str = $(
                    "<ul><li>" +
                    $name +
                    "</li><Li>" +
                    $age +
                    "</li><li>" +
                    $Class +
                    "</li><li><input type='button' value='修改' id='reset' class='btn' /></li> <li><input type='button' value='删除' id='del' class='btn' /></li></ul > "
                );
                $("#row").append($str);
            });
    });
    // 清空操作
    $(".clear").on("click", function() {
        $("#name").val("");
        $("#age").val("");
        $("#class").val("");
    });
    var $inps = $("#cover p input");
    for (var i = 0; i < $inps.length; i++) {
        console.log(111);
        $inps.eq(i).blur(function() {
            // console.log(1);
            if ($(this).val() === "") {
                $(this).parent().next("span").css("fontSize", 12);
                $(this).parent().next("span").css("color", "red");
                $(this).parent().next("span").css("display", "block");
            } else {
                $(this).parent().next("span").css("display", "none");
            }
        });
    }
    // $("input").blur(function() {
    //     for (var i = 0; i < $(this).length; i++) {
    //         if ($(this).eq(i).val() === "") {
    //             $(this).eq(i).next("span").css("fontSize", 12);
    //             $(this).eq(i).next("span").css("color", "red");
    //             $(this).eq(i).next("span").css("display", "block");
    //         }
    //     }

    //     console.log(1);
    // });
});
//1.获取删除按钮 #del
//2.给当前的删除按钮注册点击事件 点击的时候删除这个ul元素